<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Join SOCialize Groups!</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<link rel="stylesheet" type="text/css" href="css/join.css"/>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css"/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="js/join_group.js"></script>
</head>
<body>

<div id="header">
	<div id="logo"><a href="main.html"><img src="img/logo.png"/></a></div>
	<div id="log_out"><a href="php/logout.php"><img width=60 src="img/logout.png"/></a></div>
    <div class="nav" id="create_group"><a href="create_group.html">Create group</a></div>
    <div class="nav" id="join_group"><a href="join_group.html">Join<br/>group</a></div>
    <div id="user"><a href="profile.html"><img width=60 src="img/profile.png"/></a></div>
	<div id="user-info"></div>
	<script>
	$.post('php/user-info.php', function(info){
        $('#user-info').text(info);
    })
	</script>	
</div>


<div id="popup"></div>



<div id="search_by_cat">
	<h2>Categories</h2>
	<select>
		<option value="all">All</option>
		<option value="collecting">Collecting</option>
		<option value="outdoor recreation">Outdoor recreation</option>
		<option value="performing arts">Performing arts</option>
		<option value="creative hobbies">Creative hobbies</option>
		<option value="scale modelling">Scale modelling</option>
		<option value="cooking">Cooking</option>
		<option value="gardening">Gardening</option>
		<option value="reading">Reading</option>
		<option value="sports">Sports</option>
		<option value="other">Other</option>
	</select>
	<div class="result_wrapper">
	<div class="result"></div>	
	<input type="submit" value="Join Group"></input>
	</div>
	<div class="desc"></div>
</div>

<div id="search_by_email">
	<h2>Group members</h2>
	<h3>Join your friends' group</h3>
	<input id="email" type="text" placeholder="enter your friends' email (separated with comma)"></input>
	<input id="email_find" type="submit" value="Find Groups"></input>
	<div class="result"></div>
	<input id="email_join" type="submit" value="Join Group"></input>
	</div>
</div>

<div id="test"/>





</body>
</html>